<template>
    <div>
        <div :class="['tree-btn-con',(active?'active':'')]"
             @click="clickHandler"
             @mouseover="handlerIcon('hover')"
             @mouseout="handlerIcon('')">
            <div :class="['inner',(tag?'tag':'')]" :style="{'paddingLeft':level*20+'px'}">
                <div class="little-box">
                    <slot name="icon">
                        <img v-if="showIcon" :src="iconPath">
                    </slot>
                </div>
                <span>
                    <slot></slot>
                </span>
                <div class="msg">
                    <slot name="msg"></slot>
                </div>
            </div>
        </div>
    </div>

    <div :class="['children-con', (showChildren?'open':'')]">
        <yorha-tree-button
                v-for="(item, index) in children"
                :children="item.children"
                :level="level+1"
                :id="item.id"
                :tag="item.tag"
                :active="item.active"
                :key="index" @clickBtn="childrenHandler">
            {{ item.title }}
            <template #msg>{{item.msg}}</template>
        </yorha-tree-button>
    </div>
</template>

<script>
export default {
    name: "YorhaTreeButton"
}
</script>

<script setup>
import {onMounted, ref, watch} from "vue";

let props = defineProps({
    children: {
        type: Array,
        default: []
    },
    active: {
        type: Boolean,
        default: false
    },
    level: {
        type: Number,
        default: 0
    },
    tag: {
        type: Boolean,
        default: false
    },
    id: {
        default: ''
    }
})
let emits = defineEmits(['clickBtn'])
let showChildren = ref(false)
let iconPath = ref('/YoRHa/assets/icons/tree/add.png')
let showIcon = ref(true)

/*
* 单击时候的处理事件
* */
function clickHandler(e) {
    if (e.target.parentElement.className == 'little-box') {
        showChildren.value = !showChildren.value
        handlerIcon('hover')
    } else emits('clickBtn', props.id)
}

/*
* 当单击子组件时候的相应
* */
function childrenHandler(id) {
    emits('clickBtn', id)
}

/*
* 对于图标的处理结果
* */
function handlerIcon(flag) {
    if (flag == 'hover' || props.active) {
        if (showChildren.value) iconPath.value = '/YoRHa/assets/icons/tree/subtract_dark.png'
        else iconPath.value = '/YoRHa/assets/icons/tree/add_dark.png'
    } else {
        if (showChildren.value) iconPath.value = '/YoRHa/assets/icons/tree/subtract.png'
        else iconPath.value = '/YoRHa/assets/icons/tree/add.png'
    }
}

watch(props, () => {
    handlerIcon('')
})

onMounted(() => {
    // 判断初始是否有子按钮，若没有，将按钮设为空
    if (props.children.length == 0) showIcon.value = false
})

</script>

<style lang="less" scoped>

@import "../../style";


.tree-btn-con {
    width: 100%;
    height: 36px;
    position: relative;
    transition: all 300ms ease-in-out;
    margin: 6px 0;
    cursor: pointer;

    &:hover, &.active {
        &::before {
            width: 100%;
        }

        & > .inner {
            & > .little-box {
                background: @white;
            }

            & > span {
                z-index: 1;
                font-size: medium;
                color: @white;
            }

            &>.msg {
                color: @white;
            }
        }
    }

    &::before {
        content: '';
        width: 0;
        height: 100%;
        background: @darkGray;
        position: absolute;
        left: 0;
        top: 0;
        transition: all 300ms ease-in-out;
    }

    & > .inner {
        display: flex;
        align-items: center;
        position: relative;
        &.tag {
            & > .little-box {
                z-index: 1;
                width: 20px;
                height: 20px;
                margin: 8px;
                background: @red;

                & > img {
                    padding: 5px;
                    width: 100%;
                    height: 100%;
                    box-sizing: border-box;
                }
            }

            & > span {
                z-index: 1;
                font-size: medium;
                color: @red;
            }

            &>.msg {
                color: @red;
            }
        }

        & > .little-box {
            z-index: 1;
            width: 20px;
            height: 20px;
            margin: 8px;
            background: @darkGray;

            & > img {
                padding: 5px;
                width: 100%;
                height: 100%;
                box-sizing: border-box;
            }
        }

        &>.msg {
            padding-right: 8px;
            position: absolute;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
            right: 0;
        }

        & > span {
            z-index: 1;
            font-size: medium;
            color: @darkGray;
        }
    }
}

.children-con {
    max-height: 0;
    transition: max-height 500ms ease-in-out;
    overflow: hidden;

    &.open {
        max-height: 1000px;
    }
}
</style>